<div class="flex-column d-flex align-items-stretch h-100 w-100 pb-1">
  <div class="drag-handler p-2" [ngClass]="{ 'widget-cursor': widget.draggable }">
    {{ 'status.memory.title_memory' | translate }}
  </div>
  <canvas
    class="widget-chart h-100 w-100"
    baseChart
    [data]="lineChartData"
    [labels]="lineChartLabels"
    [options]="lineChartOptions"
    [type]="lineChartType"
  ></canvas>
  <div #widgetbackground class="hb-widget-chart-background"></div>
  <div class="d-flex flex-row flex-grow-1 align-items-center w-100 gridster-item-content text-center">
    <div class="d-flex justify-content-around flex-wrap w-100">
      <div class="text-center widget-value-parent-wrap">
        <div class="widget-value mb-0">
          @if (totalMemory !== undefined) { {{ totalMemory | number:'1.0-2' }} GB } @else {
          <i class="fas fa-spinner fa-pulse"></i>
          }
        </div>
        <div class="widget-value-label grey-text">{{ 'status.memory.label_total' | translate }}</div>
      </div>
      <div class="text-center widget-value-parent-wrap">
        <div class="widget-value mb-0">
          @if (freeMemory !== undefined) { {{ freeMemory | number:'1.0-2' }} GB } @else {
          <i class="fas fa-spinner fa-pulse"></i>
          }
        </div>
        <div class="widget-value-label grey-text">{{ 'status.memory.label_available' | translate }}</div>
      </div>
    </div>
  </div>
</div>
